<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>${className}</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"/>
    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../css/animated-border.css">
</head>
<body style="background: #eee">

<div id="app">


    <div class="container-fluid" style="background: #fff">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                    ${className}
                    </div>
                    <div class="panel-body">
                        <div class="dataTables_wrapper form-inline" role="grid">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="btn btn-success pull-right btn-sm pull-left"
                                         @click="edit_it()"><i
                                            class="fa fa-plus"></i> &nbsp;
                                        添加
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="pull-right">
                                        <label>Search:
                                            <input type="search" class="form-control input-sm">
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped table-bordered table-hover dataTable no-footer">
                                <thead>
                                <tr class="info">
                                    <#list fieldList as d>
                                        <#if d.type!='byte[]'>
                                         <td>${d.name}</td>
                                        </#if>
                                    </#list>

                                    <td width="110">编辑</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="d in page_list">
                                    <#list fieldList as d>
                                        <#if d.type!='byte[]'>
                                    <td>{{d.${d.name}}}</td>
                                        </#if >
                                    </#list>

                                    <td>
                                            <span style="cursor: pointer">
                                                <span class=" btn-primary btn-sm"
                                                      @click="edit_it(d.id)">编辑
                                            </span>
                                            <span class=" btn-danger btn-sm"
                                                  @click="delete_it(d.id)">删除
                                        </span>
                                    </span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="row">

                                <div class="col-sm-12">
                                    <div class="pull-left">
                                        <label>
                                            <select class="form-control input-sm" v-model="page_size"
                                                    @change="reload_data()">
                                                <option value="10">10</option>
                                                <option value="15">15</option>
                                                <option value="20">20</option>
                                                <option value="25">25</option>
                                            </select>
                                            页面大小
                                        </label>
                                        总条数：{{page_data.totalElements}}
                                    </div>
                                    <ul class="pagination pull-right" style="margin: 0;">
                                        <li :class="page_data.first?'disabled':''" class=" previous ">
                                            <a href="javascript:"
                                               @click="goto_page(page_data.pageable.pageNumber)">上一页
                                            </a>
                                        </li>


                                        <li v-for="d in page_data.totalPages"
                                            v-if="d>page_data.pageable.pageNumber-3&&d<page_data.pageable.pageNumber+5"
                                            :class="page_data.pageable.pageNumber==d-1?'active':''">
                                            <a
                                                    href="javascript:"
                                                    @click="goto_page(d)">{{d}}
                                            </a>
                                        </li>
                                        <li :class="page_data.last?'disabled':''">
                                            <a href="javascript:"
                                               @click="goto_page(page_data.pageable.pageNumber+1)">下一页
                                            </a>
                                        </li>
                                        <li >
                                            <a href="javascript:"
                                               @click="goto_page(page_data.totalPages)">共{{page_data.totalPages}}页
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            page_index: 1,
            page_data: {},
            page_list: [],
            page_size: 10,
        },
        created() {
            var vm = this;
            $.post("../${className}/findAll", {page: vm.page_index, size: vm.page_size}, function (data) {
                vm.page_list = data.obj.content;
                data.obj.content = [];
                vm.page_data = data.obj;
            })
        },
        methods: {
            reload_data() {
                var vm = this;
                $.post("../${className}/findAll", {page: vm.page_index, size: vm.page_size}, function (data) {
                    vm.page_list = data.obj.content;
                    data.obj.content = [];
                    vm.page_data = data.obj;
                })
            },
            goto_page(page) {
                var vm = this;
                if (page > 0 && vm.page_index != page) {
                    vm.page_index = page;
                    vm.reload_data();
                }
            },
            delete_it(id) {
                var vm = this;
                layer.confirm('您确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.post("../${className}/deleteById", {id: id}, function (data) {
                        if (data.ok) {
                            vm.reload_data();
                        }
                        layer.msg(data.msg);
                    })
                });
            },
//编辑该菜单
            edit_it(id) {
                var vm = this;
                layer.open({
                    type: 2,
                    title: "编辑",
                    shadeClose: true,
                    closeBtn: 0,
                    shade: 0.3,
                    area: ['446px', '795px'],
                    content: '${className}Edit.html?id=' + id, //iframe的url
                    end: function () {
                        vm.reload_data();
                    }
                });
            }
        }
    })
</script>
</body>
</html>